<template>

<div class="news">

  <div class="news-main">

<!--    搜索查询功能-->
    <div class="nav" >
      <div class="left">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>查询区域</span>
          </div>
        <div>标题:</div><el-input v-model="title" label="标题:" placeholder="请输入标题"></el-input>
          作者:<el-input v-model="author" placeholder="请输入作者名称"></el-input>
          <div class="btns">
            <el-button class="search" type="primary" size="mini" @click="doSearch">查询</el-button>
            <el-button  class="res" type="info" size="mini" @click="rest" >重置</el-button>
          </div>

        </el-card>
      </div>

      <el-button type="primary" style="margin-top: 10px" @click="addArticle">新增文章</el-button>
    </div>

<!--  新闻列表的内容-->
    <div class="news-list">

    <div class="tabl">
      <el-table
          :border="true"
          :data="newslist"
          style="width: 100%"
          align="center"
          :row-class-name="tableRowClassName">
        <el-table-column
            prop="addTime"
            label="更新时间"
            width="120">
        </el-table-column>
        <el-table-column
            prop="author"
            label="作者"
            width="120">
        </el-table-column>
        <el-table-column
            prop="title"
            label="标题"
            width="120">
        </el-table-column>
        <el-table-column
            prop="hot"
            width="120"

            label="是否Hot">
          <template slot-scope="scope">
          {{scope.row.data == 1 ?"热文" :"淡文"}}
          </template>
        </el-table-column>
        <el-table-column
            prop="desc"
            width="250"
            label="内容梗概">
        </el-table-column>
        <el-table-column
            prop="zanCount"
            width="120"
            label="点赞数">
        </el-table-column>
        <el-table-column
            prop="viewCount"
            width="120"
            label="浏览量">
        </el-table-column>
        <el-table-column

            width="180"
            label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="EditNews(scope.row.id)">编辑</el-button>
            <el-button type="primary" size="mini" @click="delNews(scope.row.id)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>
    </div>
  </div>
  <!--    引入分页-->
  <page-nation :total="totals" @changepage = "changepage"></page-nation>
</div>

</template>

<script>
import newsapi from '@/api/material/newsapi'
import PageNation from '@/views/material/picture/pagnation/index'
export default {
name: "Matenews",
  components:{
    PageNation
  },
data(){
return{
  title:'',
  author:'',
  newslist:[],
  totals:0,
  start:1
}

},
methods:{
  tableRowClassName({row, rowIndex}) {
    if (rowIndex === 1) {
      return 'warning-row';
    } else if (rowIndex === 3) {
      return 'success-row';
    }
    return '';
  },
  //按条件查询
  doSearch(){
    this.getList()
    this.title = ""
    this.author =""
  },
  //重置搜索
  rest(){
    this.getList()
  },
  //获取列表内容
  getList(){
    newsapi.getList({
      start:this.start,
      limit:10,
      title:this.title,
      author:this.author
    })
    .then(res=>{
      console.log(res)
      this.newslist = res.data.list;
      this.totals = res.data.totalRow;

    })
  },
  //打开新增页面
  addArticle(){
    this.$router.push({name:"newpage"})
  },
  //打开编辑 页面
  EditNews(vl){
    console.log(vl)
    this.$router.push({name:'newEdit',params:{id:vl}})
  },
  //删除列表的新闻
  delNews(id){
    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      newsapi.delNews({id})
      .then(res=>{
        if (res.code == 'success'){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getList()
        }
      })
    })
  },
  changepage(val){
    console.log(val)
    this.start=val;

    this.getList()
  }
},
  created(){
  this.getList()
  }
}
</script>

<style lang="scss" scoped>
  .news-main{
    .nav{
      width: 90%;
      margin: 10px auto;

      .left{
        width: 50%;
        .btns{
          display: flex;
          align-items: center;
          .search{
            margin-top: 15px;
            margin-left: 70%;
          }
          .res{
            margin-top: 15px;

          }
        }

      }

    }
    .news-list{
      width: 90%;
      margin-left: 20px;
      //将文字居中
        .el-table td, .el-table th{
          text-align: center;
        }
      ::v-deep .el-table .cell{
       text-align: center;
      }
    }
  }

</style>
